<template>
	<view class="apply">
		<view class="content">
			<view class="title">
				<image src="../../static/images/banner.jpg" mode="aspectFill"></image>
				<h1>TUI学院讲师申请</h1>
			</view>
			<view class="form">
				<uni-forms label-position="top" v-model="formData" ref="formRef" :rules="rules" validate-trigger="blur">
					<uni-group title="个人信息" top="20" mode="card">
						<uni-forms-item label="讲师姓名" required name="name">
							<uni-easyinput type="text" placeholder="请输入姓名" v-model="formData.name" />
						</uni-forms-item>
						<uni-forms-item label="讲师照片" required name="avatar">
							<view class="image">
								<image :src="formData.avatar" mode="aspectFill" @click="chooseImg"
							     ></image>
							</view>
							<view class="text" style="color:#9c9fa3;margin-top: 20rpx;">
								<p>将用于前台展示，建议本人真实头像或自制卡通头像</p>
								<p>建议尺寸：<span style="color: #16cdf7;">300px * 300px</span></p>
								<p>支持格式：.jpg .png .jpeg .bmp格式。图片大小不超过<span style="color: #16cdf7;">2M</span></p>
							</view>
						</uni-forms-item>
						<uni-forms-item label="讲师级别" required name="level">
							<uni-data-select v-model="formData.level" :localdata="levelData"></uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="手机号" required name="mobile">
							<uni-easyinput type="text" placeholder="请输入手机号" v-model="formData.mobile" disabled :value="formData.mobile" />
						</uni-forms-item>
						<uni-forms-item label="邮箱" required name="email">
							<uni-easyinput type="text" placeholder="请输入邮箱" v-model="formData.email" />
						</uni-forms-item>
					</uni-group>
					<uni-group title="个人经历" top="20" mode="card">
						<uni-forms-item label="讲师介绍" required name="intro">
							<uni-easyinput type="textarea" placeholder="请输入讲师介绍" v-model="formData.intro" />
						</uni-forms-item>
						<uni-forms-item label="讲师资历" required name="career">
							<uni-easyinput type="textarea" placeholder="请输入讲师资历" v-model="formData.career" />
						</uni-forms-item>
					</uni-group>
				</uni-forms>
				<view class="btn">
					<button type="primary" @click="submit">提交申请</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		addTeacher
	} from '../../apis/teacher.js'
	const formData = ref({
		avatar: 'https://wzy-0523.oss-cn-qingdao.aliyuncs.com/c32dc0e468d14aefb6c9d1e2b025c840upload.png',
		mobile:uni.getStorageSync('member').mobile
	})
	const levelData = ref([{
		text: '首席讲师',
		value: 1
	}, {
		text: '高级讲师',
		value: 0
	}])
	const rules = {
		name: {
			rules: [{
				required: true,
				errorMessage: '请输入姓名'
			}, {
				minLength: 2,
				maxLength: 10,
				errorMessage: '姓名长度在 2 到 10 个字符'
			}]
		},
		avatar: {
			rules: [{
				required: true,
				errorMessage: '请上传头像'
			}]
		},
		level: {
			rules: [{
				required: true,
				errorMessage: '请选择讲师级别'
			}]
		},
		mobile: {
			rules: [{
				required: true,
				errorMessage: '请输入手机号'
			}, {
				pattern: /^1\d{10}$/,
				errorMessage: '手机号格式不正确'
			}]
		},
		email: {
			rules: [{
				required: true,
				errorMessage: '请输入邮箱'
			}, {
				format: 'email',
				errorMessage: '邮箱格式不正确'
			}]
		},
		intro: {
			rules: [{
				required: true,
				errorMessage: '请输入讲师介绍'
			}]
		},
		career: {
			rules: [{
				required: true,
				errorMessage: '请输入讲师资历'
			}]
		}
	}
	const chooseImg = () => {
		uni.chooseImage({
			count: 1,
			sizeType: ['original', 'compressed'],
			sourceType: ['album', 'camera'],
			success: (res) => {
				// 上传图片
				uni.uploadFile({
					url: 'http://172.16.7.75:82/teacher/upload',
					filePath: res.tempFilePaths[0],
					name: 'file',

					success: (res) => {
						formData.value.avatar = JSON.parse(res.data).data;
						uni.showToast({
							title: '上传成功'
						})
					},
					fail: (err) => {
						console.log(err)
						uni.showToast({
							title: '上传失败'
						})
					}
				})
			}
		})
	}
	const formRef = ref(null)
	const submit = () => {
		formRef.value.validate().then(() => {
			apply()
		}).catch(err => {
			uni.showToast({
				title: '请填写完整信息',
				icon:'error'
			})
		})
	}
	const apply=async()=>{
		const res=await addTeacher(formData.value)
		if(res.data.code==200){
			uni.showToast({
				title: res.data.msg,
				icon:'none'
			})
			uni.reLaunch({
				url: '/pages/teacher/applySuccess'
			})
		}else{
			uni.showToast({
				title: res.data.msg,
				icon:'none'
			})
		}
	}
</script>

<style lang="scss" scoped>
	.apply {
		padding: 50rpx 0;
		background: #eee;

		.content {
			.title {
				padding: 0 30rpx;
				position: relative;
				text-align: center;

				image {
					width: 100%;

				}

				h1 {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					color: #fff;
					font-size: 40rpx;
				}
			}

			.form {
				padding: 0 30rpx;

				.image {
					image {
						width: 200rpx;
						height: 200rpx;
					}
				}

				.btn {
					margin-top: 50rpx;
					text-align: center;

					button {
						width: 300rpx;
						height: 80rpx;
						line-height: 80rpx;
						border-radius: 40rpx;
						background-color: #ff7900;
						color: #fff;
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>
